<template>
  <div class="dimenDialog">
    <!--    科目列表弹窗-->
    <el-dialog
      v-dialogDrag
      :title="$t('market.dimensionString')"
      model
      :visible.sync="isclientlDialog"
      :close-on-click-modal="false"
      width="400px"
      top="30vh"
      :before-close="dimenConfirm"
    >
      <div v-for="(item, index) in dimenList" :key="item.fid">
        <span class="dimenLef">{{ item.fname }}</span>
        <el-input v-model="item.frealName" size="mini" style="width: 200px">
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="sujectOpen(index, item.fname)"
          />
        </el-input>
        <br>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dimenConfirm">{{ $t('btn.cancel') }}</el-button>
        <el-button type="primary" @click="dimenConfirm">{{ $t('btn.confirm') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-dialogDrag
      :title="$t('market.dimension')"
      model
      :visible.sync="isclient"
      :close-on-click-modal="false"
      width="50%"
      top="5vh"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <el-input v-model.trim="client.frealNumber" class="input-width" size="mini" :placeholder="$t('shop.fnumber')" @keyup.enter.native="clientSearch" />
        <el-input v-model.trim="client.fname" class="input-width" size="mini" :placeholder="$t('shop.name1')" @keyup.enter.native="clientSearch" />
        <el-button size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <jc-table
        :table-data="clientlDialogData"
        :table-header="clientDialogHeader"
        table-height="53vh"
        serial
        @clickRow="clientlSelectRow"
      />
      <jc-pagination
        v-show="client.total > 0"
        :total="client.total"
        :page.sync="client.pageNum"
        :limit.sync="client.pageSize"
        @pagination="sujectOpen"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  queryDimensionSearch
} from '@/api/financial/voucher'

export default {
  props: {
    dimenList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      // 科目列表数据分页
      isclientlDialog: true,
      isclient: false,
      client: {
        frealNumber: '',
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      clientlDialogData: [],
      clientDialogHeader: [
        { label: this.$t('shop.fnumber'), prop: 'frealNumber' },
        { label: this.$t('shop.name1'), prop: 'frealName' },
        { label: 'ID', prop: 'frealId' }
      ],
      prodValue: { frealId: '', frealName: '', frealNumber: '' }
    }
  },
  methods: {
    sujectOpen(index, item) {
      if (index >= 0) this.indexSelf = index
      if (item) this.dimenSelf = item || this.dimenSelf
      this.isclient = true
      const DATA = {
        ...this.client,
        searchName: this.dimenSelf + ''
      }
      queryDimensionSearch(DATA).then(res => {
        this.clientlDialogData = res.data.list
        this.client.total = res.data.total
      })
    },
    // 双击选中
    clientlSelectRow(item) {
      this.dimenList[this.indexSelf] = Object.assign(this.dimenList[this.indexSelf], item)
      this.isclient = false
    },
    // 确定
    dimenConfirm() {
      this.dimenString = ''
      this.dimenList.map(res => {
        res.fdimensionId = res.fid || res.fdimensionId
        this.dimenString += res.frealNumber + '/' + res.frealName + ';'
      })
      this.$emit('subject', this.dimenList, this.dimenString)
    },
    clientSearch() {
      this.client.pageNum = 1
      this.sujectOpen(this.indexSelf, this.dimenSelf)
    },
    // 表格关闭前回调
    handleClose() {
      this.isclient = false
    }
  }
}
</script>

<style scoped lang="scss">
.dimenDialog {
  .dimenLef {
    width: 100px;margin: 0 5px 5px;
  }
}
.materiel-form {
  margin-bottom: 5px;
  .el-button {
    margin-left: 10px;
  }
}
</style>
